<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Cloud Config</title>

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <link href="lib/metro-bootstrap/css/metro-bootstrap.min.css" rel="stylesheet"/>

    <link href="css/main.css" rel="stylesheet"/>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container-fluid">
        <div class="row" style="margin-top: 50px;">
            <div class="col-md-2">

                <!-- logo -->
                <div class="logo">


                </div>
                <!--side bar-->
                <div class="sidebar">
                    <ul id="sidebar" class="nav nav-sidebar">
                        <li v-for="item in items" :id="'item_'+item.id">
                            <a href="#" @click="redictFunc($event)">
                                {{item.title}}
                            </a>
                        </li>

                    </ul>


                </div>
            </div>
            <div class="col-md-10">
                <iframe src="recentUse.html" id="mainFrame" scrolling="auto" frameborder="0"></iframe>

            </div>


        </div>
    </div>
    <!-- alert box -->
    <div class="alert-box" id="alertBox">
        <template v-for="alert in alerts" >
            <div  :class="'alert-'+alert.type"class="alert alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>{{alert.title}}</strong> {{alert.content}}
            </div>
        </template>
    </div>
    <!-- jquery -->
    <script src="lib/jquery/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <!--vue-->
    <script src="lib/vue/vue.min.js"></script>
    <!-- common.js -->
    <script src="js/common.js"></script>
    <script>
        //logic code

        //page init
        var initPage = function(){
            // main frame
            $("#mainFrame").width($("#mainFrame").parent().width());
            $("#mainFrame").height($(window).height()-95);
            //alert box
            $("#alertBox").css('left',$(window).width()/2-250);


        }
        initPage();


        //vue object
        //side bar
        var sidebarApp = new Vue({
            el:"#sidebar",
            data:{
                items:[],
            },
            created:function(){
                this.initSidebar();
                this.getItems();

            },
            methods:{
                initSidebar:function(){

                },
                getItems:function(){
                    var that = this;
                    $.ajax({
                        url:serverUrl+rootPath+"/sidebar.json",
                        asnyc:true,
                        dataType:"json",
                        crossDomain:true,
                        data:null,
                        type:"get",
                        success:function(data){
                            that.items = data;
                        }

                    });
                },
                redictFunc:function(e){
                    var obj = e.currentTarget;
                    var itemId = $(obj).parent().attr("id").split("_")[1];
                    //console.info("itemId is "+itemId);
                    $("#mainFrame").attr("src",this.getItemUrl(itemId));
                },
                getItemUrl:function(itemId){
                    for(var i = 0 ; i<this.items.length ; i++){
                        if(this.items[i].id == itemId){
                            return this.items[i].url;
                        }
                    }
                }
            }

        });


        /**
         * alert box app
         */
        var alertBoxApp = new Vue({
            el:"#alertBox",
            data:{
                alerts:[],
                nowId:0,
                milliseconds:3000,
            },
            methods:{
                add:function(alert){
                    this.nowId = this.nowId+1;
                    alert.id=this.nowId;
                    var that =this;
                    this.alerts.push(alert);
                    setTimeout(function(){
                        that.remove(alert.id);
                    }, this.milliseconds);
                },
                remove:function(alertId){
                    for(var i=0,j=0;i<this.alerts.length;i++){
                        if(this.alerts[i].id !=alertId){
                            Vue.set(this.alerts, j++, this.alerts[i]);
                        }
                    }
                    this.alerts.pop();
                }

            }

        });



    </script>
</body>
</html>